<template>
	<view class="box">
		<page-meta>
			<navigation-bar :title="detailData.name"></navigation-bar>
		</page-meta>
		<view class="title">
			<view>{{detailData.name}}</view>
			<view>
				<view>作者：{{detailData.username}}</view>
				<view>创建时间：{{detailData.created_at}}</view>
			</view>
		</view>
		<rich-text :nodes="detailData.content" :preview="true"></rich-text>
	</view>
</template>

<script>
	import {
		articleDetail
	} from '../../api/api';
	import {
		getDate
	} from '../../util';
	export default {
		data() {
			return {
				id: "",
				detailData: {}
			};
		},
		onLoad(e) {
			this.id = e.id;
			this.getData();
		},
		methods: {
			getData() {
				articleDetail(this.id).then(r => {
					this.detailData = {
						...r.data,
						created_at: getDate(r.data.created_at)
					};
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;

		>view:first-of-type {
			font-size: 30rpx;
			color: #111;
			text-align: center;
		}

		>view:last-of-type {
			padding: 0 10rpx;
			display: flex;
			margin-bottom: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20srpx;

			>view {
				color: #aaa;
				font-size: 24rpx
			}
		}
	}
</style>
